<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Layout Example</title>
  <style>
    /* Define the grid container */
    .grid-container {
      display: grid;
      grid-template-columns: 200px 1fr; /* Sidebar with fixed width, main area takes the remaining space */
      grid-template-rows: auto 1fr auto; /* Auto-sized header and footer, main area takes the remaining space */
      grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
      min-height: 100vh; /* Ensure the container takes at least the full height of the viewport */
    }

    /* Styles for grid items */
    header, footer {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
      grid-area: header; /* Added grid area for the header and footer */
    }

    sidebar {
      grid-area: sidebar;
      background-color: #f0f0f0;
      padding: 10px;
    }

    main {
      grid-area: main;
      padding: 20px;
    }

    footer {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
      grid-area: footer; /* Added grid area for the footer */
    }
  </style>
</head>
<body>
<!-- Grid Container -->
<div class="grid-container">
  <!-- Header -->
  <header>
    <h1>Header</h1>
  </header>

  <!-- Sidebar -->
  <sidebar>
    <h2>Sidebar</h2>
    <ul>
      <li>Menu Item 1</li>
      <li>Menu Item 2</li>
      <li>Menu Item 3</li>
    </ul>
  </sidebar>

  <!-- Main Content -->
  <main>
    <h2>Main Content</h2>
    <p>This is the main content area of the webpage.</p>
  </main>

  <!-- Footer -->
  <footer>
    <p>&copy; 2023 Example Website</p>
  </footer>
</div>
</body>
</html>
